<template>
  <div class="container">
    <!-- 游戏分类1 -->
    <Category title="游戏">
      <!-- (4) 可以通过解构赋值直接将传过来的对象直接挑选里面的games并重新赋值
             解构赋值一般用于不想多次用对象.的方式来拿数据
         (5) 现在scope已经弃用了，改为slot-scope了，更加的见名知意
             可能怕和样式的scope搞混吧
    -->
      <template slot-scope="{ games }">
        <ol>
          <li v-for="(g, index) in games" :key="index">{{ g }}</li>
        </ol>
      </template>
    </Category>
    <!-- 游戏分类2 -->
    <Category title="游戏">
      <!-- (2) 传过来是一个对象，因为可能会有多个数据，可以选择使用哪个数据
           (3) scope只能写在template里面，看来越来越鼓励写template了，为了少点
               无效的div
      -->
      <template slot-scope="atguigu">
        <ul>
          <li v-for="(g, index) in atguigu.games" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>
    <!-- 游戏分类3 -->
    <Category title="游戏">
      <template slot-scope="{ games }">
        <h4 v-for="(g, index) in games" :key="index">{{ g }}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";

export default {
  name: "myTest",
  data() {
    return {};
  },
  components: { Category },
};
</script>

<style>
.container,
.footer {
  display: flex;
  justify-content: space-around;
}

/* (2) 注意插槽的样式即可以写在 当前组件内传递数据的文件 也可以写在插槽所在文件内
       一个是解析好了一起传过去，另一个是传过去再解析样式
*/
img {
  width: 100%;
}

video {
  width: 100%;
}

h4 {
  text-align: center;
}
</style>
